<template>
  <div id="userLayout" :class="['user-layout-wrapper']">
    <div class="top">
      <div class="header">
        <img :src="oemSiteInfo.sysLogoUrl" style="height: 30px;">
      </div>
      <!-- <a class="mch-url" href="#">
        <span>商户登录</span>
        <i class="bi bi-arrow-right-short" />
      </a> -->
    </div>
    <div class="container" :style="[{background: 'url(' + oemSiteInfo.mch.loginPageBGImgUrl + ')'}, {backgroundSize:'cover' }, {backgroundPosition: 'center top'}, {backgroundRepeat:'no-repeat'}]">
      <div class="user-layout-lang" />
      <div class="user-layout-content">
        <!-- 错误提示信息 -->
        <a-alert v-if="showRegisterErrorInfo" type="error" showIcon style="margin-bottom: 15px;" :message="showRegisterErrorInfo" />
        <div class="main">
          <div class="desc">商户注册</div>
          <a-form ref="formRegister" class="user-layout-login" :model="formState" :rules="vdata.rules" @submit="handleSubmit">
            <a-form-item name="mchName" class="input-item">
              <login-text-up v-model:value="formState.mchName" placeholder="商户名称" />
            </a-form-item>
            <a-form-item name="phone" class="input-item">
              <login-text-up v-model:value="formState.phone" placeholder="手机号" />
            </a-form-item>
            <div class="code">
              <a-form-item name="code" class="input-item">
                <login-text-up v-model:value="formState.code" placeholder="请输入验证码" />
              </a-form-item>
              <div>
                <a-button type="primary" :disabled="vdata.isDisabled" style="height: 40px;margin-left: 10px" @click="sendSMS()">{{ vdata.codeBtnText }}</a-button>
              </div>
            </div>
            <a-form-item name="password" class="input-item">
              <login-text-up v-model:value="formState.password" placeholder="登录密码" isPassword="password" />
            </a-form-item>
            <a-form-item name="confirmPwd" class="input-item">
              <login-text-up v-model:value="formState.confirmPwd" placeholder="确认登录密码" isPassword="password" />
            </a-form-item>
            <a-form-item name="inviteCode" class="input-item">
              <login-text-up v-model:value="formState.inviteCode" placeholder="邀请码" />
            </a-form-item>
            <a-form-item name="mchType" class="input-item">
              <a-radio-group v-model:value="formState.mchType">
                <a-radio :value="2"><a-tooltip title="使用服务商接口,可进件,低费率">特约商户</a-tooltip></a-radio>
                <a-radio :value="1" :disabled="true"><a-tooltip title="使用自有商户接口,联系客服开通">普通商户</a-tooltip></a-radio>
              </a-radio-group>
              <a class="forge-password" style="float: right;" @click="toLogin">去登录 >></a>
            </a-form-item>
            <a-form-item name="checked">
              <a-checkbox v-model:checked="formState.checked" @click.stop.prevent="check">我已阅读并同意</a-checkbox>
              <a class="forge-password" @click.stop.prevent="serviceAgreement">《服务协议》</a>和<a class="forge-password" @click.stop.prevent="privacyPolicy">《隐私政策》</a>
            </a-form-item>
          </a-form>
          <a-button
            size="large"
            type="primary"
            htmlType="submit"
            class="login-button submit"
            :loading="loginBtnLoadingFlag"
            style="width: 100%"
            @click="handleSubmit"
          >
            注册
          </a-button>
        </div>
        <div class="footer" />
      </div>
    </div>
  </div>
  <a-modal v-model:visible="vdata.visible" :title="vdata.toastTitle" :footer="null" width="70%">
    <div style="height: 70vh; overflow: auto;" v-html="vdata.toastContent" />
  </a-modal>
</template>
<script setup lang="ts">
import { sendSmsCode, register } from '@/api/login'
import { $getTreaty, $getPasswordRules }from '@/api/manage'
import router from '@/router'
import { useRoute } from 'vue-router'
import { message } from 'ant-design-vue'
import { ref, reactive, onMounted } from 'vue'
import { useOem } from '@/store/modules/oem'

// 获取网站信息
const oemSiteInfo = useOem().getSiteInfo()

let loginPosition = ref('') // 决定登录框水平位置 左中右？
let loginPageCardPosition = oemSiteInfo.mch.loginPageCardPosition
if(loginPageCardPosition === 'right') {
  loginPosition.value = 'flex-end'
} else if (loginPageCardPosition === 'center') {
  loginPosition.value = 'center'
} else if (loginPageCardPosition === 'left') {
  loginPosition.value = 'flex-start'  
}

let loginBtnLoadingFlag = false  // 登录按钮是否显示 加载状态
let showRegisterErrorInfo = ref('')  // 是否显示登录错误面板信息
let timer: number = -1
let formRegister = ref()

let formState : any = reactive({
  mchName: '',
  phone: '',
  code: '',
  password: '',
  confirmPwd: '',
  inviteCode: null,
  checked: false,
  mchType: 2
})

const vdata = reactive({
  visible: false, // 对话框
  toastContent: '', // 对话框内容
  toastTitle: '', // 对话框标题
  codeBtnText : '发送短信验证码',
  isDisabled : false,
  checked: false,
  passwordRules: /^$/, //密码规则
  passwordRulesText: '', //密码规则提示文字
  rules: {
  mchName: [{ required: true, message: '请输入商户名称', trigger: 'blur' }],
  phone: [{ required: true, pattern: /^1\d{10}$/, message: '请输入正确的手机号', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
  password: [
              { required: false, trigger: 'blur' }, {
              validator: (rule, value) => {
                if (!vdata.passwordRules.test(formState.password)) {
                  return Promise.reject(vdata.passwordRulesText)
                } else if(formState.password !== formState.confirmPwd) {
                  return Promise.reject('新密码与确认新密码不一致')
                } else return Promise.resolve()
              }
            }
            ],
  confirmPwd: [{ required: false, trigger: 'blur' }, {
              validator: (rule, value) => {
                if (!vdata.passwordRules.test(formState.password)) {
                  return Promise.reject(vdata.passwordRulesText)
                } else if(formState.password !== formState.confirmPwd) {
                  return Promise.reject('新密码与确认新密码不一致')
                } else return Promise.resolve()
              }
            }],
  checked: [{ type: 'boolean', required: true, message: '请勾选用户隐私协议', trigger: 'check' },{
    validator: (rule, value) => {
                  if(formState.checked){
                    return Promise.resolve()
                  }else{
                    return Promise.reject('请勾选用户隐私协议')
                  }
                }
  }]

  }
})

onMounted(() => {
  formState.inviteCode = useRoute().query.c
  getPasswordRules()
})
function getPasswordRules () { // 获取密码规则
  $getPasswordRules().then(res => {
    vdata.passwordRules = new RegExp(res.regexpRules)
    vdata.passwordRulesText = res.errTips
  })
}

// handler
function handleSubmit (){
  formRegister.value.validate().then(valid =>{
    let params = {
      mchName: formState.mchName,
      phone: formState.phone,
      code: formState.code,
      confirmPwd: formState.confirmPwd,
      inviteCode: formState.inviteCode,
      mchType: formState.mchType
    }
    register(params).then((res) => {
        message.success('注册成功')
        router.push({ path: '/' }) // 校验成功，返回登录页
    }).catch(err => {
      showRegisterErrorInfo = (err.msg || JSON.stringify(err))
      loginBtnLoadingFlag = false
    })
  }).catch(valid =>{})
}

function sendSMS () { // 发送短信验证
  if (!formState.phone) {
    return message.error('请输入手机号！')
  }
  // 校验手机号
  const reg = /^[1][0-9]{10}$/
  if (!reg.test(formState.phone)) {
    return message.error('请输入正确的手机号！')
  }
  vdata.isDisabled = true

  sendSmsCode({phone: formState.phone, smsType: 'register'}).then(res => {
    return message.success('发送成功！')
  }).catch(err => {
     vdata.isDisabled = false
    showRegisterErrorInfo = (err.msg || JSON.stringify(err))
    loginBtnLoadingFlag = false
    // 出错后三秒停止计时
    setTimeout(() => {
      if (timer) clearInterval(timer)
      vdata.isDisabled = false
      vdata.codeBtnText = '发送短信验证码'
    }, 500)
  })

  let time = 60 // 重发验证码时间
  vdata.codeBtnText = `${time}秒后重新发送`
  const timer = setInterval(() => {
    time -= 1
    vdata.codeBtnText = `${time}秒后重新发送`
    if (time === 0) {
      clearInterval(timer)
      vdata.isDisabled = false
      vdata.codeBtnText = '发送短信验证码'
    }
  }, 1000)
}

// 跳转页面
function toLogin () {
  router.push({ name: 'login', path: '/user/login' })
}


// 服务协议
function serviceAgreement() {
  vdata.visible = true
  vdata.toastTitle = '服务协议'
  // message.success('服务协议')
  getTreaty('服务协议')
}

// 隐私政策
function privacyPolicy() {
  vdata.visible = true
  vdata.toastTitle = '隐私政策'
  getTreaty('隐私政策')
}

// 隐私协议与服务政策
const getTreaty = (name) => {
  $getTreaty().then(res => {
    name === '服务协议' ? vdata.toastContent = res.serviceAgreement 
                       : vdata.toastContent = res.privacyPolicy 
  })
}

// 勾选用户协议
function check() {
  formState.checked = !formState.checked
}
</script>

<style lang="less" scoped>
#userLayout.user-layout-wrapper {
  height: 100%;
  .top {
    height: 80px;
    padding: 0 35px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header {
      height: 44px;
      line-height: 44px;
    }
    .mch-url {
      display: flex;
      align-items: center;
      color: #000;
      cursor: pointer;
      span{
        margin-right: 10px;
      }
      &:hover{
        color: steelblue;
        .bi{
          transform: translateX(10px);
        }
      }
    }
    .bi{
      font-size: 18px;
    }
  }
  .container {
    display: flex;
    justify-content: center;
    align-items: center; //修改这一项来决定登录对话框的水平位置，flex-start == left； center == center； flex-end == right
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
    width: 100%;
    height: calc(100vh - 80px);
    background: #f0f2f5 url(/src/assets/svg/background.svg) no-repeat 50%;
    background-size: cover;
    //padding: 50px 0 84px;
    position: relative;
    transition: 0.3s ease;

    .user-layout-lang {
      width: 100%;
      // height: 40px;
      // line-height: 44px;
      height: 0;
      text-align: right;
    }

    .user-layout-content {
      width: 100%;
      height: 100%;
      transition: 0.3s ease;
      input {
        height: 40px !important;
      }

      .main {
        padding: 50px 30px;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: #fff;
        border-top: 1px solid #e7eaf3;
        align-items: center;
        transition: all 0.3s , border 0s ease;
        .ant-form{
          max-width: 300px;
        }
        .desc {
          font-weight: bold;
          font-size: 20px;
          letter-spacing: 0.04em;
          color: #2691ff;
          margin-bottom: 20px;
          text-align: center;
        }
        .input-item {
          margin-bottom: 20px;
        }
      }

      .footer {
        // position: absolute;
        width: 100%;
        bottom: 0;
        padding: 0 16px;
        margin: 48px 0 24px;
        text-align: center;

        .links {
          margin-bottom: 8px;
          font-size: 14px;
          a {
            color: rgba(0, 0, 0, 0.45);
            transition: all 0.3s;
            &:not(:last-child) {
              margin-right: 40px;
            }
          }
        }
        .copyright {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }
      }
    }

    a {
      text-decoration: none;
    }

  }

  //登录页响应式的调整
  @media screen and (min-width:769px) and (max-width:1024px){
    .container {
      padding: 0 100px;
      min-height: 700px;
      height: calc(100vh - 80px);
      align-items: v-bind(loginPosition);
      .user-layout-content {
        width: 360px;
        height: auto;
        .main{
          width: 360px;
          box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
          border: 0.0625rem solid #E7EAF3 ;
          height: auto;
          justify-content: center;
          border-radius: 10px;
        }
      }
    }
  }
  @media screen and (min-width:1025px) and (max-width:1366px){
    .container {
      padding: 0 150px;
      min-height: 700px;
      height: calc(100vh - 80px);
      align-items: v-bind(loginPosition);
      .user-layout-content {
        width: 360px;
        height: auto;
        .main{
          width: 360px;
          box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
          border: 0.0625rem solid #E7EAF3 ;
          height: auto;
          justify-content: center;
          border-radius: 10px;
        }
      }
    }
  }
  @media screen and (min-width:1367px) and (max-width:1600px){
    .container {
      padding: 0 250px;
      min-height: 700px;
      height: calc(100vh - 80px);
      align-items: v-bind(loginPosition);
      .user-layout-content {
        width: 360px;
        height: auto;
        .main{
          width: 360px;
          box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
          border: 0.0625rem solid #E7EAF3 ;
          height: auto;
          justify-content: center;
          border-radius: 10px;
        }
      }
    }
  }
  @media screen and (min-width:1601px){
    .container {
      padding: 0 300px;
      min-height: 700px;
      height: calc(100vh - 80px);
      align-items: v-bind(loginPosition);
      .user-layout-content {
        width: 360px;
        height: auto;
        .main{
          width: 360px;
          box-shadow: 0 6px 12px rgb(140 152 164 / 8%);
          border: 0.0625rem solid #E7EAF3 ;
          height: auto;
          justify-content: center;
          border-radius: 10px;
        }
      }
    }
  }
}

</style>

<style lang="less" scoped>
.user-layout-login {

  label {
    font-size: 14px;
  }

  .forge-password {
    font-size: 14px;
    color: @jee-theme;
  }

  button.login-button {
    padding: 0 15px;
    font-size: 16px;
    height: 40px;
    width: 100%;
  }

  .user-login-other {
    text-align: left;
    margin-top: 24px;
    line-height: 22px;

    .item-icon {
      font-size: 24px;
      color: rgba(0, 0, 0, 0.2);
      margin-left: 16px;
      vertical-align: middle;
      cursor: pointer;
      transition: color 0.3s;

      &:hover {
        color: #1890ff;
      }
    }

    .register {
      float: right;
    }
  }
  .code {
    display: flex;
    justify-content: space-between;
    .code-input {
      width: 216px;
    }
    .code-img {
      width: 120px;
      height: 40px;
      margin-left: 10px;

    }
  }
  .submit {
    margin-bottom: 0;
  }
}
</style>
